<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <!-- jqgrid-->
     <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .w_H {
            width: 100%;
            height: 100%
        }

        .col-H {
            height: 600px
        }
        select {
            width: 150px;
            height: 22px;
        }

        input[type="text"] {
            height: 22px;
            width: 150px
        }

        /*#select2 option[checked="checked"]{background: #fff}*/

        select:-internal-list-box option:checked {
            background: #fff
        }

        p {
            color: red
        }
    </style>
</head>

<body class="gray-bg" style="color:#333;padding:3px;">
<div class="wrapper border-bottom white-bg " style="padding:0 12px;">
      <div class="page-heade">
        <h2 class="title_color text-center">维护城市所属经销商-修改</h2>
    </div>
    <table class="table-bordered table">
        <tr>
            <td><label for="">经销商名称：</label></td>
            <td><input type="text" class="form-control" name=""></td>
            <td><label for="">所属城市：</label></td>
            <td><input type="text" class="form-control" name=""></td>
            <td><label for="">所属省份:</label></td>
            <td><input type="text" class="form-control"></td>
            <td><label for="">所属分区:</label></td>
            <td> <input type="text" class="form-control"></td>
        </tr>
        <tr>
            <td colspan="8" class="text-center">
                <button class="btn btn-sm btn-info">查询</button><span class="lr_5"></span>
                <button class="btn btn-sm btn-info">清空查询条件</button>
            </td>
        </tr>
    </table>
    <table class="table-bordered table">
        <tr>
            <td class="info text-center" style="font-size:16px;width: 35%">非所属经销商</td>
            <td style="width: 20%"></td>
            <td class="info text-center" style="width: 45%;font-size: 16px;">福州市所属经销商</td>
        </tr>
        <tr>
            <td style="padding: 0">
               <div style="height: 600px">
                <select multiple id="select1" style="height: 100%;width: 100%;font-size: 14px;" class="form-control">
                    {volist name="feisuoshu" id="row"}
                    <option value="{$row.id}">{$row.title}</option>
                    {/volist}
                </select>
            </div>
            </td>
            <td class="text-center"><button class="btn btn-white" type="button" id="add">&gt;&gt;&gt;&gt;&gt;&gt;</button></td>
            <td style="padding: 0">
                 <div style="height: 600px;">
                   <select multiple id="select2" style="width: 100%;height: 100%;font-size: 14px" class="form-control">
                        {volist name="suoshu" id="row"}
                        <option value="{$row.id}">{$row.title}</option>
                        {/volist}
                    </select>
                 </div>
            </td>
        </tr>
    </table>
    <div class="row white-bg" style="margin:5px 0">
        <button class="btn btn-warning" style="margin:30px 0 30px 44%" onclick="back()">返回</button>
        <p>1.按住Ctrl单机鼠标左键可以多选。</p>
        <p>2.按住鼠标左键拖动可以多选</p>
        <p>3.页面刷新时只会按查询条件带出非所属经销商，如果进行添加的经销商不符合当前的查询条件就要去掉查询条件才能看见添加的经销商。</p>
    </div>
</div>


<!-- 全局js -->
{include file="Public/footer"}

<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
    $(document).ready(function () {
        $('#add').click(function () {
            var $options = $('#select1 option:selected'); //获取选中的元素
            var arr=[];
            $options.each(function (i,o) {
                arr.push($(o).val())
            })
            arr = arr.join(',')
            var $remove = $options.remove();
            
            $.ajax({
                type:'post',
                url:'{:url("batchSet")}',
                data:{cityid:'{$id}',id:arr},
                dataType:'json',
                success:function (data) {
                    if(data.success==false){
                        swal(data.msg,'','error')
                    }else{
                        $remove.appendTo('#select2');
                    }
                }
            })
        });

    })

    function back() {
        history.go(-1)
    }
</script>

</body>

</html>